<template>
	<view class="info-address" :style="'height:'+ screenHeight +'px !important;'">
		<uni-nav-bar color="#ffffff" background-color="#007AFF" :status-bar="true" left-icon="arrowleft" title="地址设置"  right-text="保存" @clickLeft="back" @clickRight="saveaddress"/>
		<view class="info-address-block">
			<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
			    <text class="info-address-select" :style="'font-size:'+textSize+'rpx;'">选择省市区</text>
			</pick-regions>
			<text class="info-address-result">{{regionName}}</text>
		</view>
		<view class="info-address-block">
			<text class="info-address-tip" v-show="tipDisplay">详细地址</text>
			<input type="text" value="" placeholder-style="color:#abb1b1" placeholder="详细地址" @input="handleInput"/>
		</view>
    </view>
</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	export default {
	        components:{ pickRegions },
	        data(){
	            return {
					screenHeight: '',
					textSize:32,
					tipDisplay:false,
	                region:[],
	                defaultRegion:['广东省','广州市','番禺区'],
	                defaultRegionCode:'440113'
	            }
	        },
			onLoad() {
			     this.screenHeight = uni.getSystemInfoSync().windowHeight;
			},
	        computed:{
	            regionName(){
	                // 转为字符串
					var str=this.region.map(item=>item.name).join(' ')
					if(str.length>0){
						this.textSize=24
					}
	                return str;
	            }
	        },
	        methods:{
	            // 获取选择的地区
	            handleGetRegion(region){
	                this.region = region
	            },
				handleInput(e){
					var s=e.target.value;
					if(s.length>0){
						this.tipDisplay=true;
					}else{
						this.tipDisplay=false;
					}
					
				},
				back(){
					uni.navigateTo({
						url:"./user/info"
					})
				},
	        }
	    }
</script>

<style scoped lang="less">
	@import url("../../../static/color.less");
	@import url("../../../static/fontSize.less");
	.info-address{
		width: 100%;
		height: 100%;
		background-color:@colorLightGray;
	}
	.info-address-block{
		padding: 30rpx;
		margin-top: 10rpx;
		background-color: @colorWrite;
	}
	.info-address-select{
		color: #abb1b1;
	}
	.info-address-result{
		font-size: @fontBig;
	}
	.info-address-divider{
		background-color: @colorLightGray;
		height: 10rpx;
	}
	.info-address-tip{
		font-size: @fontSmall;
		color: #abb1b1;
	}
</style>
